<template>
	<view class="replay-con">
		
		<view class="replay-t">
			请选择取消订单的原因（必选）
		</view>
		<view class="item-con row between" v-for="(item,index) in dataList" :key="index" @tap="changeItem(item,index)">
			<view class="item-t">
				{{item.reason}}
			</view>
			<view class="item-icon">
				<icon type="success" color="#CC1313" size="21" v-if="item.checked" />
				<icon type="circle" size="21" v-else />
			</view>
		</view>
		<view class="textarea-con" v-if="activeIndex==dataList.length-1">
			<textarea
				class="textarea"
				maxlength="80"
				type="text"
				v-model="reason"
				placeholder="请输入您的其他原因"
			/>
		</view>
		<view class="replay-btn" hover-class="hover-opacity" @tap="subReplay">
			确定
		</view>
	</view>
</template>

<script>
	import orderMixins from "./mixin/order.js";
	export default {
		mixins:[orderMixins],
		data(){
			return{
				id:"",
				reason:"",
				reasonId:"",
				activeIndex:null,
				dataList:[]
			}
		},
		watch:{
			activeIndex(newVal){
				this.reasonId=this.dataList[newVal].id;
				if(newVal!=this.dataList.length-1){
					this.reason=this.dataList[newVal].reason;
				}else{
					this.reason="";
				}
			}
		},
		onLoad(options) {
			this.id=options.id;
			this.loadData();
		},
		methods:{
			changeItem(item,index){
				this.activeIndex=index;
				this.dataList.forEach((v,k)=>{
					if(index==k){
						v.checked=true;
					}else{
						v.checked=false;
					}
				})
			},
			async loadData(){
				const data={
					id:this.id,
					uid:uni.getStorageSync('uid')
				}
				const res=await this.$request('goods/refund_reason',data,{showLoading:true});
				if(res.result==0){
					res.dataList.forEach(item=>item.checked=false);
					let item={
						checked:false,
						reason:"其他",
						id:""
					}
					res.dataList.push(item);
					this.dataList=res.dataList;
				}else{
					this.$util.msg(res.resultNote);
				}
			},
			async subReplay(){
				if(this.reason==""){
					this.$util.msg('退款原因不能为空!');
					return
				}
				const data={
					id:this.id,
					reason: this.reason,
					reasonId: this.reasonId,
				}
				this.refund(data);
			}
		}
	}
</script>

<style scoped>
	.replay-con{
		padding: 40upx 20upx;
	}
	.replay-t{
		font-size: 30upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		padding-bottom: 40upx;
	}
	.item-t{
		font-size: 26upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}
	.item-con{
		line-height:88upx;
	}
	.textarea-con{
		width: 100%;
		background: #F6F6F6;
		margin-top: 60upx;
	}
	.textarea{
		width: 100%;
		padding: 20upx;
	}
	.replay-btn{
		width: 706upx;
		height: 88upx;
		margin-top: 80upx;
		text-align: center;
		line-height: 88upx;
		background: #99130C;
		border-radius: 44upx;
		font-size: 30upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>
